import { ProTable } from '../ProTable'
import React, { useState, useMemo } from 'react'
import { request, useT } from '@designable/event-system'

export function DicProTable(props: any) {
  const columns = props.columns?.data || []
  const $t = useT()
  const [opts, setOpts] = useState([])

  const restColumns = useMemo(
    () => [
      {
        hideInTable: true,
        width: 230,
        title: $t('项目'),
        dataIndex: 'projectCode',
        valueType: 'select',
        search: true,
        request: async () => {
          const data = (await request({
            uri: '/api/platform/dataDictionary/getProjectInfoList',
            params: {},
            method: 'GET',
          })) as any
          return data.map((item: any) => ({
            ...item,
            label: item.type,
          }))
        },
        fieldProps: {
          onChange: async (value: any) => {
            if (value) {
              const data = (await request({
                uri: '/api/platform/dataDictionary/getDataDictionaryType',
                params: {
                  projectCode: value,
                },
              })) as any
              setOpts(
                data.map((item: any) => ({
                  label: item.dataDictionaryType,
                  value: item.dataDictionaryType,
                }))
              )
            } else {
              setOpts([])
            }
          },
        },
      },
      {
        hideInTable: true,
        width: 100,
        title: $t('类型'),
        dataIndex: 'dataType',
        valueType: 'select',
        search: true,
        fieldProps: {
          options: opts,
        },
        
      },
      ...columns,
    ],
    [opts, columns]
  )
  return <ProTable {...props} columns={{ data: restColumns }} />
}
